<script setup>
import scrollboard from './scrollboard.vue'
import xiguavideo from './xiguavideo.vue'
import xiguavideoFlv from './xiguavideoFlv.vue'
import { videoList, activerVideo, openVide } from '../pages/home/index'
import { ref } from 'vue'
import rftitle from './rftitle.vue'

const tapVideo = (item) => {
  openVide.value = false


  if (item.status) {
    activerVideo.value = item
    openVide.value = true
  }
}

console.log(videoList.value)

const tabsIndex = ref(0)

const changeCheckedFn = (e) => {
  tabsIndex.value = e
  console.log(tabsIndex.value)
}




</script>

<template>
  <div class="flex flex-col h-full">
    <rftitle title="监控实时画面" class="mb-[20px]"></rftitle>
    <div class="flex-1 ">
      <div class="flex flex-wrap gap-[10px]  justify-start" v-for="(i, n) in videoList" :key="n">
        <template v-if="tabsIndex == n">

          <div class=" w-[85%] relative flex flex-col mx-auto" @click="tapVideo(item)" v-for="(item, index) in i"
            :key="index">

            <div class="w-full ">
              <xiguavideoFlv v-if="item.status" :url="item.httpaddress" :id="item.id">
              </xiguavideoFlv>

              <img class="w-[176px] h-[99px]" v-else src="../assets/two/lixian.png" alt="">
            </div>
            <div class="mt-[8px] text-[14px] text-white text-center">{{ item.jkwz }}</div>
          </div>
        </template>


      </div>
    </div>

    <div class="my-[20px] mx-auto flex justify-center gap-[8px] mt-auto">

      <div @click="changeCheckedFn(index)" class="w-[70px] h-[40px]  flex justify-center items-center mt-[20px] "
        :class="tabsIndex == index ? ' tabs2 text-yellow-600' : 'tabs1 text-blue-600'" v-for="(i, index) in videoList">
        {{ index + 1 }}
      </div>

    </div>

  </div>
</template>

<style scoped>
.tabs1 {
  background-image: url(../assets/tabs1.png);
  background-size: 100% 100%;
  font-weight: 600;
}

.tabs2 {
  background-image: url(../assets/tabs2.png);
  background-size: 100% 100%;
  font-weight: 600;
}
</style>
